<template>
	<DocWrap>
		<DocCodepen>
			<div style="height: 400px;background: #f3f3f3;position: relative;">
				<UISlip v-model="slipValue1">
					<div style="width: 100px;height: 100px;background: #6cf;"></div>
				</UISlip>
				<UISlip v-model="slipValue2" wrap unit="%">
					<div style="width: 100px;height: 100px;background: #e00;"></div>
				</UISlip>
			</div>
		</DocCodepen>
		<DocUse>
			<h3>props</h3>
			<el-table :data="propsData">
				<el-table-column prop="prop" label="属性" width="180" />
				<el-table-column prop="type" label="类型" width="180" />
				<el-table-column prop="exp" label="说明" />
			</el-table>
			<h3>events</h3>
			<el-table :data="eventsData">
				<el-table-column prop="event" label="事件" width="180" />
				<el-table-column prop="args" label="参数" width="180" />
				<el-table-column prop="exp" label="说明" />
			</el-table>
			<h3>slots</h3>
			<el-table :data="slotsData">
				<el-table-column prop="slot" label="插槽" width="180" />
				<el-table-column prop="data" label="数据" width="180" />
				<el-table-column prop="exp" label="说明" />
			</el-table>
		</DocUse>
	</DocWrap>
</template>

<script setup>
	
	import { ref } from 'vue';
	import DocWrap from '../../doc/wrap';
	import DocCodepen from '../../doc/codepen';
	import DocUse from '../../doc/use';
	import UISlip from '@/ui/slip';
	
	const propsData = [
		{
			prop: 'value',
			type: 'Object',
			exp: 'xy坐标值'
		}, {
			prop: 'unit',
			type: 'String(px),Array',
			exp: '坐标单位px或者%'
		}, {
			prop: 'placement',
			type: 'String，可选值cc, tc, rc, bc, lc, tl, tr, bl, br',
			exp: '相对移动点位置'
		}, {
			prop: 'wrap',
			type: 'Boolean',
			exp: '限制仅在相对父元素内移动'
		}
	];
	
	const eventsData = [
		{
			event: 'down',
			args: '{ x, y }',
			exp: '按下'
		}, {
			event: 'move',
			args: '{ x, y }',
			exp: '移动'
		}, {
			event: 'up',
			args: '{ x, y }',
			exp: '松开'
		}
	]
	
	const slotsData = [
		{
			slot: 'default',
			exp: '内容'
		}
	]
	
	const slipValue1 = ref({ x: 50, y: 50 });
	const slipValue2 = ref({ x: 50, y: 50 });
	
</script>

<style lang="scss" scoped>
</style>